<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/vue.js"></script>
		<script src="./lib/vue-router.js"></script>
		<style>
			html,body{margin: 0;padding: 0;}
			h1{margin: 0;padding: 0;font-size: 16px;}
			/* container用来做页面发布大小的，相当于浮动 */
			.container{
				display: flex;
				height: 800px;
			}
			.header{
				background-color: orange;
				height: 50px;
			}
			.left{
				background-color: lightgreen;
				flex: 2;
			}
			.main{
				background-color: lightpink;
				flex: 8;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<router-view></router-view>
			<div class="container">
				<router-view name="lift"></router-view>
				<router-view name="main"></router-view>
			</div>
		</div>
	</body>
	<script>
		
		var header={
			template:'<h1 class="header">头部区域</h1>'
		}
		
		var lift={
			template:'<h1 class="left">左侧栏目区域</h1>'
		}
		var main={
			template:'<h1 class="main">主体区域</h1>'
		}
		var router = new VueRouter({
			routes:[
				{
					path:'/',
					components:{
						'default':header,
						'lift':lift,
						'main':main
					}
				}
			]
		})
		var vm=new Vue({
			el:'#app',
			data:{},
			methods:{},
			router
		})
	</script>
</html>
